<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <a href="http://www.baidu.com">百度</a>
      <router-link to="/login">去登录页</router-link>

      <router-view></router-view>
    </div>
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
    <script>
      // a标签是什么类型的导航
      //a会跳转，声明式导航
      // 响应button的点击事件, 完成跳转功能, 这种属于什么类型的导航
      //js跳转属于编程式导航

      const router = new VueRouter({
        routes: [
          {
            path: "/login",
            component: {
              template: `<div>登录页面<br/><button @click="togo">编程式导航跳转首页</button></div>`,
              methods: {
              togo() {
                this.$router.push("/index");
              },
            },
            },
            
          },
          {
            path:"index",
            component:{template:"<div>首页</div>"}

          }
        ],
      });

      const vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        router,
      });
    </script>
  </body>
</html>
